<#include "/WEB-INF/template/common/layout/l_admin.ftl"/>
<@adminLayout>
<label for="text">上传图片</label>
<input type="file" name="files" id="fileupload_input"/>
<div id="callbackimg">

</div>
<#--script中含有页面控件初始化代码，所以需要引入
{
    "delete_type": "GET",
    "delete_url": "/updown/loadimg/upload/20140826/5214840dd72f44718e72e0edb970be36.jpg",
    "name": "5214840dd72f44718e72e0edb970be36.jpg",
    "size": 1109,
    "thumbnail_url": "/updown/loadimg/upload/20140826/5214840dd72f44718e72e0edb970be36.jpg",
    "type": "image/jpeg",
    "url": "/updown/loadimg/upload/20140826/5214840dd72f44718e72e0edb970be36.jpg"
}
-->
    <@script>
    <link href="${CONTEXT_PATH}/plugin/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css"
          rel="stylesheet">
    <script src="${CONTEXT_PATH}/plugin/assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="${CONTEXT_PATH}/plugin/assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="${CONTEXT_PATH}/plugin/assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#fileupload_input").fileupload({
                url: "${CONTEXT_PATH}/updown/up",//文件上传地址，当然也可以直接写在input的data-url属性内
                formData: {param1: "p1", param2: "p2"},//如果需要额外添加参数可以在这里添加
                done: function (e, data) {
                    //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                    //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                    //返回的数据在result.result中，假设我们服务器返回了一个json对象
                    var html = [];
                    html.push("<img src='");
                    html.push("${CONTEXT_PATH}" + data.result.url + "'/>");
                    $("#callbackimg").html(html.join(""))
//                    console.log(JSON.stringify(data.result));
                }
            })
        });
    </script>
    </@script>
</@adminLayout>